@import '../../styles/themes';
@include nb-install-component() {
  .cluster-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: nb-theme(background-basic-color-2);
    border-radius: 0.5rem;
    margin: 0.5rem 1rem;

    .selector-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .cluster-icon {
        font-size: 1.5rem;
        color: nb-theme(color-primary-default);
      }

      .cluster-select {
        flex: 1;
        min-width: 200px;

        ::ng-deep .select-button {
          min-height: 32px;
        }
      }

      .no-clusters {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;

        .text-muted {
          font-size: 0.875rem;
          color: nb-theme(text-hint-color);
        }
      }

      .refresh-btn,
      .manage-btn {
        padding: 0.25rem 0.5rem;
        
        nb-icon {
          font-size: 1.125rem;
        }
      }
    }

    .active-cluster-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      background: nb-theme(background-basic-color-3);
      border-radius: 0.375rem;
      font-size: 0.875rem;

      nb-icon {
        font-size: 1rem;
      }

      .active-text {
        color: nb-theme(text-basic-color);
        font-weight: 500;
      }
    }
  }

  .cluster-option {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    .cluster-name {
      font-weight: 600;
      color: nb-theme(text-basic-color);
    }

    .cluster-host {
      font-size: 0.75rem;
      color: nb-theme(text-hint-color);
    }
  }

  // Responsive
  @media (max-width: 768px) {
    .cluster-selector {
      margin: 0.5rem;

      .selector-wrapper {
        .cluster-select {
          min-width: 150px;
        }
      }
    }
  }
}

